<template>
    <view class="container">
		<!-- 顶部安全区域占位 -->
		<view class="navbar" :style="{ paddingTop: safeAreaInsets.top-10 + 'px' }"></view>
		<!-- 房间成员（折叠面板） -->
		<view v-if="isLoading">
			<uni-collapse>
				<uni-collapse-item title="房间成员" :open="true" :show-arrow="false" :title-border="'none'">
					<view>正在加载房间成员信息...</view>
				</uni-collapse-item>
			</uni-collapse>
		        
		</view>
       <view v-else>
			<uni-collapse>
				<uni-collapse-item title="房间成员" :open="true" :show-arrow="false" :title-border="'none'">
					<view class="content fade-in">
						<view class="user" v-for="(member, userId) in members" :key="userId">
						    <image :src="member.avatar" class="avatar"></image>
						    <text class="username">{{ member.nickname || member.name }}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<!-- 对局记录（消息卡片） -->
		<!-- 这里感觉应该是在页面初始化去后端对局记录中获取数据，根据数据条数动态生成卡片 -->
		<view class="custom-card" v-for="(record, index) in history" :key="index">
		    <view class="card-time">
		        <text class="card-text">{{ record.time }} · 第{{ index + 1 }}局</text>
		    </view>
		    <view class="card-score">
		        <view class="card-item" v-for="(score, userId) in record.scores" :key="userId">
		            <!-- <image :src="getPlayerAvatar(userId)" class="avatar"></image> -->
					<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" ></image>
		            <text class="card-text">{{ score }}</text>
		        </view>
		    </view>
		</view>
		
		<!-- 底部功能区域 -->
		<view class="foot fade-in">
		        <button class="footbutton-left" @click="settleRound">
		            <text> 结算本局 </text>
		        </button>
					
		        <image class="share" src="@/static/user.png"></image>
					
		        <button class="footbutton-right" @click="leaveRoom">
					离开房间
				</button>
		</view>
    </view>
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

import { ref, onMounted, onUnmounted, watch} from 'vue';
import { io } from '@hyoga/uni-socket.io'; 
import { onLoad } from '@dcloudio/uni-app';
// 房间信息
const roomId = ref('');
// 房间人员，这个成员列表存在哪里呢？  存在服务器内存？or  存在用户本地 or 存数据库？
const members = ref({});
// 对局记录
const history = ref([]);
// 定义socket对象（socket.value即是socketio对象）
const socket = ref(null);
//折叠面板信息刷新监听
const isLoading = ref(true);
watch(members, () => {
    isLoading.value = false;
}, { deep: true });

onMounted(() => {
	// 获取url传过来的参数
		// 每个页面实例都有一个options属性，用于存储当前页面被打开时接收的参数（通常是上一个页面跳转时传递的参数）。
	  const options = getCurrentPages()[getCurrentPages().length - 1].options;
      roomId.value = options.room_id; // 从 URL 参数中获取 roomId
      if (!roomId.value) {
          return;
      }
	  initSocket();
	  // console.log("调试1——members初值：", members.value) 
	  // 输出 Proxy(Array) {} 表示 members.value 是一个被 Proxy 代理的数组对象。
	  // 这通常出现在使用 Vue响应式数据场景中（尤其是 ref 或 reactive 创建的响应式数组）
	  // Proxy 是 JavaScript 的一个内置对象，用于创建一个对象的代理，从而实现对对象的属性访问、修改、删除等
	  // 在 Vue 3 中，响应式系统的核心就是通过 Proxy 实现的 —— 当你用 ref 或 reactive 创建数据时，Vue 会自动为数据包装一层 Proxy，以便监听数据变化并触发组件更新。
	  // console.log("调试2——roomid值：", roomId.value)

	  // 获取当前页面实例
	  // const pages = getCurrentPages();
	  // const currentPage = pages[pages.length - 1];
	  // // 从路由路径中提取 roomId
	  // const routePath = currentPage.route; // 如 "pages/room/room/740befe5-cf98-48c1-939e-509f84a20522"
	  // const routeParts = routePath.split('/');
	  // // 确保是动态路由格式并获取 roomId
	  // if (routeParts.length >= 4) {
	  //       roomId.value = routeParts[3];
	  //    } else {
		 //  // 兼容旧的查询参数方式（可选）
	  //     roomId.value = currentPage.options?.roomId || '';
	  // }
	  
	  // if (!roomId.value) {
	  //   console.error('未找到房间 ID');
	  //   return;
	  // }    
});
// 新增方法：获取对局记录
const fetchRoundHistory = async () => {
  try {
    const res = await uni.request({
      url: 'http://172.16.24.120:5000/mysqlroom/rounds/history',
      method: 'GET',
      data: {
        room_id: roomId.value
      }
    });
    
    if (res.statusCode === 200) {
      history.value = res.data.map(round => ({
        time: formatTime(round.end_time),
        scores: formatScores(round)
      }));
    }
  } catch (err) {
    console.error('获取对局记录失败:', err);
  }
};

// 时间格式化辅助函数
const formatTime = (timestamp) => {
  if (!timestamp) return '--:--:--';
  const date = new Date(timestamp);
  return date.toTimeString().substr(0, 8); // 输出格式: "10:00:00"
};

// 分数格式化辅助函数
const formatScores = (round) => {
  return {
    user1: round.user1_score || 0,
    user2: round.user2_score || 0,
    user3: round.user3_score || 0,
    user4: round.user4_score || 0
  };
};
// onMounted	Vue 3	DOM 挂载后	操作 DOM、初始化依赖 DOM 的资源、监听全局事件
// onLoad	微信小程序 /uni-app	页面加载时（DOM 渲染前）	接收路由参数、初始化页面数据、预加载数据
// onLoad((options) =>{
//     roomId.value = options.roomId; // 从 URL 参数中获取 roomId
// 	console.log("调试1——members初值：",members.value)
// 	console.log("调试2——roomid值：",roomId.value)
// 	// roomId.value = uni.getStorageSync('room_id');
// 	if (!roomId.value) {
// 		console.log('房间ID:', roomId);
// 	    console.error('未找到房间 ID');
// 	    return;
// 	}
// 	initSocket();
	// initRoom();
	// joinRoom();
// })



// 初始化 WebSocket
const initSocket = () => {
    // 创建 Socket.IO 连接后端服务器
    socket.value = io('ws://172.16.24.120:5000', {
        transports: ['websocket'], // 强制使用 WebSocket
        autoConnect: true, // 自动连接
		timeout: 5000 // 设置超时时间为5秒
    });
    // 监听连接成功事件
    socket.value.on('connect', () => {
        // console.log('Socket.IO 连接成功');
		initRoom();
		fetchRoundHistory(); // 新增：连接成功后加载历史记录
    });
    socket.value.on('room_user_init', (data) => {
		// 这里更新完newuserlist之后是否应该通知同一房间内所有用户？
        console.log('房间初始化后members:', data);
		members.value = { ...data }; // 用展开运算符触发响应式
		joinRoom();
    });
	// 监听用户加入
	socket.value.on('user_joined', (data) => {
		const userId = data.user_id; // 明确userId作为键
		if (!members.value[userId]) {
			// 正确触发响应式更新的写法
			members.value = {
				...members.value,
				[userId]: data
			};
			console.log('新增用户:', data.user_id);
		} else {
			console.log('用户已存在:', data.user_id);
			// 可选：如果需要更新现有用户数据
			// members.value = { ...members.value };
		}
	});
	// 监听用户离开
	socket.value.on('user_left', (data) => {
		const userId = data.user_id;
		// 先复制原对象，再删除属性，最后重新赋值
		const newMembers = { ...members.value };
		delete newMembers[userId]; // 删除用户
		members.value = newMembers; // 触发响应式更新
	});	
};


// 初始化房间
const initRoom = () => {
	// 读取当前房间用户信息
    socket.value.emit('init_room', { room_id: roomId.value});
};

 
// 加入房间—————— 加入房间是否要鉴权？
const joinRoom = () => {
	const user = JSON.parse(uni.getStorageSync('user'));//读取storage中的JSON字符串并解析为JSON对象
	const userid = user.userinfo?.userid;//访问userid
	const isUserInRoom = String(userid) in members.value;
	if (isUserInRoom) {
	    console.log('用户已经在房间中，无需重复加入');
	    return;
	}
    socket.value.emit('jinfangjian', { room_id: roomId.value, user_id: userid });
};



// const joinRoom = () => {
//   try {
//     // 读取并验证本地存储的用户信息
//     const userStorage = uni.getStorageSync('user');
//     // 检查存储内容是否存在
//     if (!userStorage) {
//       console.error('用户信息不存在，请先登录');
//       return;
//     }
//     // 安全解析JSON
//     const userData = JSON.parse(userStorage);
//     // 验证数据结构
//     if (!userData || !userData.userinfo) {
//       console.error('用户信息格式不正确:', userData);
//       return;
//     }
//     const user = userData.userinfo;

//     // 检查用户是否已在房间中
//     const isUserInRoom = members.value.some(member => member.user_id === user.user_id);
//     if (isUserInRoom) {
//       console.log('用户已在房间中，无需重复加入');
//       return;
//     }
    
//     // 发送加入房间请求
//     socket.value.emit('join_room', { 
//       room_id: roomId.value, 
//       user_id: user.user_id 
//     });
    
//   } catch (error) {
//     console.error('处理用户信息时出错:', error);
    
//     // 可以在这里添加重置或清理逻辑
//     uni.removeStorageSync('user'); // 清除无效的存储数据
//   }
// };



// 离开房间
const leaveRoom = () => {
	const user = JSON.parse(uni.getStorageSync('user'));//读取storage中的JSON字符串并解析为JSON对象
	const userid = user.userinfo?.userid;//访问userid
	console.log(userid)
    socket.value.emit('leave_room', { room_id: roomId.value, user_id: userid });
    uni.navigateBack();
}; 


// 结算本局
const settleRound = async () => {
  try {
    // 1. 获取房间最新数据（包含current_game）
    const res = await uni.request({
      url: `http://172.16.24.120:5000/mysqlroom/get_room_info/${roomId.value}`,
      method: 'GET'
    });
    
    // 2. 跳转到结算页
	// uni.navigateTo({
	//     url: `/pages/room/roundpay`
	// });
    uni.navigateTo({
      url: `/pages/room/roundpay?roomId=${roomId.value}&roundNumber=${res.data.current_game}`
    });
	// socket.value.emit('update_score', {
	//     room_id: roomId.value,
	//     scores: scores
	// });
    
  } catch (err) {
    uni.showToast({
      title: '获取房间信息失败',
      icon: 'none'
    });
  }
}

onUnmounted(() => {
    if (socket.value) {
        socket.value.disconnect(); // 断开连接
    }
});


</script>

<style>
	.navbar{
	/* 		安全距离background-size: cover;	
			position:relative; display:flex;
			flex-direction:column; */
			/* padding-top:20px; */
			/* z-index: 3; */
			/* background-color: green; */
		}
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	/* 折叠面板 */
	.content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 13px;
	}

	/* 消息卡片 */
	.custom-card {
	    display: flex;
	    flex-direction: column; /* 改为竖直方向排列 */
	    justify-content: space-around;
	    align-items: center;
	    padding: 20px; /* 增加内边距 */
	    margin: 20px;/* 增加外边距，与边界保持合适距离 */
	    /* border: 1px solid #ccc; */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	    background-color: #fff;
	    border-radius: 8px;
	}
	.card-time {
	    margin-bottom: 20px; /* 在时间区下方添加间距 */
	}
	.card-score {
	    display: flex;
	    flex-direction: row; /* 使card-item水平排列 */
	    justify-content: space-around; /* 均匀分布子元素 */
	    /* align-items: center; */
	}
	.card-item {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    margin: 0 26px;
	}	
	.card-text {
	    font-size: 14px;
	    color: #a0a6a7;
		text-align: center;
	}
	.card-item image {
	    width: 42px;
	    height: 42px;
	    margin-bottom: 5px;
	    border-radius: 10%;
	}
/* 整体底部容器样式 */
.foot {
    position: fixed;
    bottom: 20px; /* 距离底部20px，可以根据需求调整 */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: #f0f0f0; 
    border-radius: 10px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    padding: 10px 0; */
}

/* 左边按钮样式 */
.footbutton-left {
    background-color: #8b8a84;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
	transition: background-color 0.3s ease; /* 过渡效果 */
	width: 125px; 
	height: 60px; 
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* 右边按钮样式 */
.footbutton-right {
    background-color: #41403b;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
	transition: background-color 0.3s ease; /* 过渡效果 */
    width: 125px; 
    height: 60px; 
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 分享图标样式 */
.share {
    width: 60px; /* 图标宽度 */
    height: 60px; /* 图标高度 */
    object-fit: contain; /* 保持图片比例 */
}
.share:hover {
    transform: scale(1.3); /* 鼠标悬停时放大 */
}

/* 鼠标悬停时改变背景色 */
.footbutton-left:hover,
.footbutton-right:hover {
    background-color: #0056b3; 
}
/* 淡入动画 */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>